<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="seller.avatar" alt="" width="100%" height="100%">
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <h1 v-text="seller.name"></h1>
        </div>
        <p class="desc" v-text="seller.description"></p>
        <div class="support" v-if="seller.supports">
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text" v-text="seller.supports[0].description"></span>
        </div>
      </div>
      <div class="count-wrapper" v-if="seller.supports" @click="showDetailFun">
        <span class="count">{{seller.supports.length}}个</span>
        <i class="icon-keyboard_arrow_right"></i>
      </div>
    </div>
    <div class="bulletin-wrapper" @click="showDetailFun">
      <span class="bulletin-icon"></span>
      <span class="info" v-text="seller.bulletin"></span>
      <span class="icon-keyboard_arrow_right"></span>
    </div>
    <div class="background">
      <img :src="seller.avatar" alt="" width="100%" height="100%">
    </div>
    <transition>
    <div class="detail" v-show="showDetail">
      <div class="content clearfix">
        <div class="detail-main">
          <h1 class="name">{{seller.name}}</h1>
          <v-start :score="seller.score" :size="48"></v-start>
          <div class="title">
            <div class="line"></div>
            <div class="text">优惠信息</div>
            <div class="line"></div>
          </div>

          <div class="supports_list">
            <p v-for="item in seller.supports" :key="item.id">
              <span class="icon" :class="classMap[item.type]"></span>
              <span class="text">{{ item.description}}</span>
            </p>
          </div>

          <div class="title">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line"></div>
          </div>
          <div class="notice">{{seller.bulletin}}</div>
        </div>
      </div>
      <div class="close"><span class="icon-close" @click="hideDetailFun"></span></div>
    </div>
    </transition>
  </div>
</template>

<script>
  import start from '../start/start.vue'
  export default {
    name: "Header",
    props: ["seller"],
    data(){
      return{
        showDetail: false
      }
    },
    created(){
      this.classMap = ['decrease','discount','special','invoice','guarantee']
    },
    methods:{
      showDetailFun(){
        this.showDetail = true;
      },
      hideDetailFun(){
        this.showDetail = false;
      }
    },
    components: {
      'v-start':start
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    height: 134px;
    width: 100%;
    background-color: rgba(7,17,27,.5);
    color: #fff;
    padding:24px 12px 28px 24px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    .content-wrapper {
      height: 106px;
      display: flex;
      .avatar {
        height: 64px;
        width: 64px;
        border-radius: 2px;
      }
      .content {
        padding-left: 16px;
        .title {
          display: flex;
          h1 {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
          }
          .brand {
            width: 30px;
            line-height: 18px;
            display: inline-block;
            margin-top: 2px;
            margin-right: 6px;
            height: 18px;
            @include bg-image('brand');
            background-size: 30px 18px;
            background-repeat: no-repeat;
          }
        }
        .desc {
          font-size: 14px;
          line-height: 14px;
          font-weight: 200;
          margin-top: 8px;
        }
        .support {
          font-size: 12px;
          font-weight: 200;
          line-height: 12px;
          font-size: 0;
          margin-top: 10px;
          .icon{
            width: 12px;
            height: 12px;
            display: inline-block;
            margin-right: 4px;
            background-size: 12px 12px;
            background-repeat: no-repeat;
          }
          .text{
            font-size: 10px;
            vertical-align: top;
          }
        }
      }
      .count-wrapper{
        position: absolute;
        bottom: 46px;
        right: 12px;
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        font-size: 0;
        border-radius: 14px;
        background-color: rgba(0,0,0,0.2);
        text-align: center;
        .count{
          font-size: 10px;
        }
        .icon-keyboard_arrow_right{
          font-size: 12px;
          vertical-align: top;
          line-height: 24px;
          margin-left: 2px;
        }
      }
    }
    .bulletin-wrapper{
      width:100%;
      height: 28px;
      line-height: 28px;
      background-color: rgba(0,0,0,0.2);
      position: absolute;
      bottom: 0;
      left: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-left: 34px;
      padding-right: 22px;
      box-sizing: border-box;
      vertical-align: top;
      .bulletin-icon{
        @include bg-image('bulletin');
        background-size: 22px 12px;
        height: 12px;
        width: 22px;
        display: block;
        position: absolute;
        top: 8px;
        left: 12px;
      }
      .info{
        font-size: 10px;
        vertical-align: top;
        margin: 0 4px;
      }
      .icon-keyboard_arrow_right{
        font-size: 14px;
        position: absolute;
        right: 12px;
        line-height: 28px;
      }
    }
    .background{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      filter: blur(10px);
      -webkit-filter: blur(10px);
    }
    .detail {
      position: fixed;
      display: flex;
      flex-direction: column;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(7, 17, 27, .8);
      backdrop-filter: blur(10px);
      z-index: 1000000;
      overflow: auto;
      .content {
        flex: 1;
        .detail-main {
          margin-top: 64px;
          text-align: center;
          padding: 0 36px;
          .name {
            font-size: 16px;
            font-weight: 700;
            line-height: 16px;
            margin-bottom: 16px;
          }
          .title {
            display: flex;
            margin-top: 28px;
            margin-bottom: 24px;
            justify-content: space-between;
            .line {
              flex: 1;
              position: relative;
              border-bottom: 1px solid rgba(255, 255, 255, .2);
              top: -7px;
            }
            .text {
              padding: 0 12px;
              font-size: 14px;
              font-weight: 700;
            }
          }
          .supports_list {
            text-align: left;
            margin: 0 12px;
            font-size: 0;
            p{
              margin-bottom: 12px;
              .icon{
                width: 16px;
                display:inline-block;
                vertical-align: top;
                height: 16px;
                background-size: 16px 16px;
                background-repeat: no-repeat;
              }
              .text{
                font-size: 12px;
                font-weight: 200;
                margin-left: 6px;
              }
            }
          }
          .notice{
            font-size: 12px;
            text-align: left;
            margin: 0 12px;
            line-height: 24px;
            font-weight: 200;
          }
        }
      }
      .close {
        padding-bottom: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 32px;
        text-align: center;
        color: rgba(255, 255, 255, .5);
      }
    }
  }
  .icon {
    &.decrease {
      @include bg-image("decrease_1");
    }
    &.discount {
      @include bg-image("discount_1");
    }
    &.guarantee {
      @include bg-image("guarantee_1");
    }
    &.invoice {
      @include bg-image("invoice_1")
    }
    &.special {
      @include bg-image("special_1");
    }
  }
  .v-enter,
  .v-leave-to{
    opacity: 0;
  }
  .v-enter-active,
  .v-leave-active{
    transition: all .5s ease;
  }
</style>
